<template>
	<view class="conten">
		<view style="width: 100%;height: 230rpx;"></view>
		<view class="hi" style="font-size: 60rpx;">账号注册</view>

		<view style="width: 85%;margin: 80rpx auto;">
			<view
				style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;align-items: center;">
				<view style="color: #fff;font-size: 35rpx;">上传头像<text class="require">*</text></view>
				<view style="margin-left: 30rpx;">
					<image style="width: 80rpx;height: 80rpx;border-radius: 100rpx;" :src="headImage"
						@click="uploadImage(1)" v-if="headImage"></image>
					<image style="width: 80rpx;height: 80rpx;border-radius: 100rpx;" :src="userinfo.avatar"
						@click="uploadImage(1)" v-else-if="userinfo.avatar"></image>
					<image style="width: 80rpx;height: 80rpx;border-radius: 100rpx;" src="../../static/middle.png"
						@click="uploadImage(1)" v-else></image>
				</view>
			</view>

			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">填写昵称<text class="require">*</text>（可修改）</view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" placeholder="这是个昵称" v-model="username" style="color: #fff;" />
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">邀请码</view>
			<view
				style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input v-model="code" type="text" placeholder="选填" style="color: #fff;" />
					</view>
				</view>
				<view style="margin-right: 50rpx;" @click="empty">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/xxx.png"></image>
				</view>
			</view>

			<view
				style="margin-top: 20rpx;color: #fff;font-size: 35rpx;display: flex;justify-content: left;align-items: center;">
				<view>姓名<text class="require">*</text>（或上传图片）</view>
				<view @click="uploadImage(2)"
					style="height: 60rpx;width: 210rpx;background-color: #5A9FFC;border-radius: 16rpx;display: flex;justify-content: center;align-items: center;">
					<view style="margin-top: 10rpx;">
						<image style="width: 45rpx;height: 45rpx;" src="../../static/shang.png"></image>
					</view>
					<view>点击上传</view>
				</view>
			</view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" v-model="name" placeholder="请填写姓名" style="color: #fff;" />
				</view>
			</view>

			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">单位或部门<text class="require">*</text></view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" v-model="unit" placeholder="请填写单位或部门" style="color: #fff;" />
				</view>
			</view>

			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">岗位或职位<text class="require">*</text></view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" v-model="position" placeholder="请填写岗位或职位" style="color: #fff;" />
				</view>
			</view>

			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">登录密码<text class="require">*</text></view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" v-model="password" placeholder="请填写登录密码" style="color: #fff;" />
				</view>
			</view>
		</view>
		<view @click="vipinfo"
			style="width: 85%;height: 100rpx;background-color: #fff;color: #0D4283;margin: 60rpx auto;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;"
			v-if="pagetype != 2">下一步</view>
		<view @click="submit"
			style="width: 85%;height: 100rpx;background-color: #fff;color: #0D4283;margin: 60rpx auto;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;"
			v-else>提交</view>
		<view style="width: 85%;margin: auto;color:#FFFFFF;">
			<text style="color: #21DBE0;font-size: 38rpx;padding-right:5rpx;">✱</text>
			<text>完善个人信息(上传名片或填写姓名、单位、职位)可查看会员专享内容，如有疑问请致电{{web_service_tel}}联系客服</text>
		</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import {
		img_upload
	} from '@/common/config.js'
	export default {
		data() {
			return {
				code: '',
				token: '',
				position: '',
				unit: '',
				code: '',
				username: '',
				name: '',
				UploadFileUrl: '',
				headImage: '',
				head: '',
				cardImage: '',
				card: '',
				Img: '',
				web_service_tel: '',
				pagetype: 1,
				avatar_file: '',
				avatar_files: '',
				type: '',
				userinfo: [],
				password: ''
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			if (this.token == '') {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			user.getWebConfig().then(res => {
				console.log(res)
				this.web_service_tel = res.data.web_service_tel
			});
			this.UploadFileUrl = img_upload
			this.pagetype = uni.getStorageSync('type');
			console.log(this.pagetype)
			uni.removeStorageSync('type');
			user.getUserDetails({
				token: this.token
			}).then(res => {
				this.userinfo = res.data
				this.username = res.data.nickname
				this.code = res.data.invitation_code
				this.name = res.data.name
				this.unit = res.data.employer
				this.position = res.data.position
			});
		},
		onShow() {
			this.token = uni.getStorageSync('token', 333)
			if (this.token == '') {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			empty() {
				this.code = ''
			},
			vipinfo() {
				const {
					username,
					name,
					unit,
					position,
					password
				} = this
				if (username == "" || name == "" || unit == "" || position == "" || password == "") {
					uni.showToast({
						icon: "none",
						title: "请填写相关信息"
					})
					return
				}
				user.updateUser({
					name: this.name,
					nickname: this.username,
					employer: this.unit,
					position: this.position,
					invitation_code: this.code,
					user_image_file: this.Img,
					avatar_file: this.head,
					token: this.token,
					password: this.password,
					type: 1
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/login/vipinfo'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			submit() {
				const {
					username,
					name,
					unit,
					position,
					password
				} = this
				if (username == "" || name == "" || unit == "" || position == "" || password == "") {
					uni.showToast({
						title: "请填写相关信息"
					})
					return
				}
				user.updateUser({
					name: this.name,
					nickname: this.username,
					employer: this.unit,
					position: this.position,
					invitation_code: this.code,
					user_image_file: this.Img,
					avatar_file: this.head,
					token: this.token,
					password: this.password,
					type: 0
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			uploadImage(type) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: this.UploadFileUrl,
							filePath: tempFilePath,
							name: 'file',
							formData: {
								action: 'client_upload',
								filename: 'file',
								token: this.token,
							},
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data);
								if (data.code == 1) {
									uni.showToast({
										title: '上传成功！',
										icon: 'none'
									})
									if (type == 1) {
										this.type = 1
										this.headImage = data.data.fullurl
										this.head = data.data.url
									} else {
										this.type = 2
										this.Img = data.data.url
									}
								} else {
									uni.showToast({
										title: '上传失败！',
										icon: 'none'
									})
								}
							},
							fail: (error) => {
								uni.showToast({
									title: '上传失败！',
									icon: 'none'
								})
							},
						});
					},
				});

			},
		}
	}
</script>

<style>
	.require {
		color: red;
		margin: 0rpx 10rpx;
	}

	.conten {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #1C386E, #4683CF);
	}

	.hi {
		width: 85%;
		margin: 0 auto 20rpx;
		color: #fff;
	}

	.welcome {
		width: 85%;
		margin: 0 auto 80rpx;
		color: #fff;
	}
</style>